import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import { AtSearchBar } from 'taro-ui'
import './aiyanPolular.scss'
import item_image from '../../img/item_image.png'
import touxiang from '../../img/touxiang3.png'
import app from '../../main.js'



export default class AiyanPolular extends Component {

    config = {
        navigationBarTitleText: '爱眼科普'
    }
    constructor() {
        super(...arguments)
        this.state = {
            value: '',
            //科普数据
            kepuArr : []
        }
    }
    onChange(value) {
        this.setState({
            value: value
        })
    }
    onActionClick(value) {
        let me = this
        let data = {offset:0,length:25,title:value}
        let docArray=[]
        this.setState({
            kepuArr:[]
        })
        app.post('video_recommends/videoList',data,function(res){
            docArray =  me.state.kepuArr.concat(res.data.result.list)
            me.total  = res.data.result.total
            me.setState({
                kepuArr:docArray
            },()=>{
                console.log("asa",me.state.kepuArr.concat(res.data.result.list))
            })    
        })
    }

    //跳转到视频
    gotoAiyanPolularVideo(kepuArrId) {
        app.redirectTo('../aiyanPolularVideo/aiyanPolularVideo'+'?kepuid='+kepuArrId)
    }
    offect = 0;
    length = 25;
    total = 0;
    isFinlsh = false;
    //上拉加载
    onReachBottom() {
        if ((this.offect + this.length) < this.total) {
            app.toast('正在加载----')
            this.offect = this.offect + this.length;
            this.isFinlsh = false;
            //调用接口
        } else {
            app.toast('没有更多数据了咯')
            this.isFinlsh = true;
        }
    }
    // 数据获取
    getData(){
        let me = this
        let data = {offset:this.offect,length:this.length}
        let docArray=[]
        app.post('video_recommends/videoList',data,function(res){
            console.log('kep',res)
            docArray =  me.state.kepuArr.concat(res.data.result.list)
            me.setState({
                kepuArr:docArray
            })
            me.total  = res.data.result.total       
        })
    }

    componentDidMount(){
        this.getData()
    }

    onClear(value){
        this.setState({
            kepuArr:[],
            value:''
        })
        this.getData()
    }


    render() {    
        return (
            <View>
                <View className='topSearchBar'>
                    <AtSearchBar
                        customStyle='background-color: #ededed;'
                        placeholder="请输入症状、眼病"
                        value={this.state.value}
                        onChange={this.onChange.bind(this)}
                        onActionClick={this.onActionClick.bind(this,this.state.value)}
                        onClear={this.onClear.bind(this,this.state.value)}
                    />
                </View>
                {this.state.kepuArr.map((item) => {
                    return <View className='topInfo' onClick={this.gotoAiyanPolularVideo.bind(this,item.id)}>
                        <View className='infoImage'>
                            <Image
                                className='imageStyle'
                                src={item.image}
                            />
                        </View>
                        <View className='infoText'>
                            <View className='textSymptom'>
                                {item.title}
                                </View>
                            <View className="textDocInfo">
                                <View>
                                    <Image
                                        className='touxiang'
                                        src={item.head_image}
                                    />
                                </View>
                                <View className='docInfo'>
                                    <View>{item.doctor_name}  {item.positional_title}</View>
                                    <View>{item.hospital}</View>
                                </View>
                            </View>
                        </View>
                    </View>
                })}
            </View>
        )
    }
}